<template>
  <view class="todo-page">
    <!-- 头部区域 -->
    <view class="header">
      <view class="user-box">
        <image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
        <view class="user-info">
          <text class="greeting">Hello, {{ userInfo.nick_name }}!</text>
          <text class="welcome">欢迎使用中捷数据业务中管理系统</text>
        </view>
      </view>
      <text class="logout" @click="handleLogout"><img  src="/static/logout.svg" mode="aspectFill"/>登出</text>
    </view>
    <!-- 待办区域 -->
    <view class="todo-box">
      <view class="todo-title-box"> 
        <view class="todo-title">
        <img src="/static/我的待办.svg"/>
        </view>
      <view class="todo-count">{{ todoCount }}</view>

      </view>
  

    <!-- 搜索区域 -->
    <view class="search-box">
      <input 
        type="text" 
        v-model="searchKey" 
        placeholder="请输入关键词"
        placeholder-class="placeholder"
      />
      <button class="search-btn" @click="handleSearch">搜索</button>
    </view>

    <!-- 空状态 -->
    <view class="list-box">
      <scroll-view v-if="listData.length > 0" style="padding-bottom:20px;height:549px;" :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" 
      @scrolltolower="handleScrollToLower"
					>
					<view v-for="(item,index) in listData" :key="index">
            <view class="list-item">
              <view class="list-item-title">
               {{ item.formFuture.taskForm[0].value}}
              </view>
              <view class="divider"></view>
              <view class="list-item-info">
                <img src="/static/流程.svg"/>
                <text class="lable">流程名称</text>{{ item.processDefinitionName}}</view>
              <view class="list-item-info">
                <img src="/static/创建人.svg"/>
                <text class="lable" style="letter-spacing: 5px;">创建人</text>
                {{ item.startUsername }}</view>
              <view class="list-item-info">
                <img src="/static/状态.svg"/>
                <text class="lable">当前任务</text>
                {{ item.taskName }}</view>
                <view class="btn-box" @click="handleToDetails(item)">
                  <text>去审核</text>
                  <img src="/static/goahead.svg"/>
                </view>
            </view>
          </view>
			</scroll-view>
      <view v-else class="empty-box"> 
        <img src="/static/empty.png"/>
        <view>暂无待办内容</view>
      </view>
    </view>
  </view>
</view>
</template>
<script>
import { getTodoList } from '@/api/todo'
export default {
  data() {
    return {
      userInfo: {
        name: '张三'
      },
      todoCount: 0,
      searchKey: '',
      listData:[
      {
          title: '湖南省教育厅关于采购招标代理服务的网上超市采购项目成交公告',
          flowName: '标前信息登记审批',
          creator: '信息中心-章三三',
          currentTask: '业务单位内部审批',
          status: '待审核',  // 可以根据实际需求添加状态
          id: '1'           // 唯一标识
        },
        {
          title: '湖南省教育厅关于采购招标代理服务的网上超市采购项目成交公告',
          flowName: '标前信息登记审批',
          creator: '信息中心-章三三',
          currentTask: '业务单位内部审批',
          status: '待审核',  // 可以根据实际需求添加状态
          id: '2'           // 唯一标识
        }  ,
             {
          title: '湖南省教育厅关于采购招标代理服务的网上超市采购项目成交公告',
          flowName: '标前信息登记审批',
          creator: '信息中心-章三三',
          currentTask: '业务单位内部审批',
          status: '待审核',  // 可以根据实际需求添加状态
          id: '3'           // 唯一标识
        } ,      {
          title: '湖南省教育厅关于采购招标代理服务的网上超市采购项目成交公告',
          flowName: '标前信息登记审批',
          creator: '信息中心-章三三',
          currentTask: '业务单位内部审批',
          status: '待审核',  // 可以根据实际需求添加状态
          id: '1'           // 唯一标识
        }    ,   {
          title: '湖南省教育厅关于采购招标代理服务的网上超市采购项目成交公告',
          flowName: '标前信息登记审批',
          creator: '信息中心-章三三',
          currentTask: '业务单位内部审批',
          status: '待审核',  // 可以根据实际需求添加状态
          id: '1'           // 唯一标识
        }   ,    {
          title: '湖南省教育厅关于采购招标代理服务的网上超市采购项目成交公告',
          flowName: '标前信息登记审批',
          creator: '信息中心-章三三',
          currentTask: '业务单位内部审批',
          status: '待审核',  // 可以根据实际需求添加状态
          id: '1'           // 唯一标识
        }
      ]
    }
  },
  mounted(){
    console.log(uni.getStorageSync('userInfo'),'444444444')
    this.userInfo = uni.getStorageSync('userInfo')
    this.getTodoList()

  },
  methods: {
    handleLogout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            uni.reLaunch({
              url: '/pages/login/index'
            })
          }
        }
      })
    },
    handleScrollToLower(){
      console.log('滚动到底部');
    },
    handleToDetails(item){
    //  let url= ['/pages/registrationApprovalDetails/index','/pages/bidApprovalDetails/index','/pages/bidSummary/index']
     let url;
    //  if(item.processDefinitionName === '商机冲突审批'){
    //   url = '/pages/registrationApprovalDetails/index?id='+item.businessId
    //   }
      url= '/pages/bidApprovalDetails/index?id=1328323523332149248'
      uni.navigateTo({
   
        // url:'/pages/bidApprovalDetails/index'
        url,
        param:item
      })
    },
    getTodoList(){
      getTodoList({
        size:10,
        current:1
      }).then(res=>{
        console.log(res,'444444444')
        this.todoCount = res.data.total
        this.listData = res.data.records
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.todo-page {
  min-height: 100vh;
  // padding: 40px;
  background-image: url('/static/bg.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 60rpx;
  height:153px;

  .user-box {
    display: flex;
    align-items: center;
    
    .avatar {
      width: 46px;
      height: 46px;
      border-radius: 50%;
      margin-right: 10px;
      background: #F0F0F0;

    }

    .user-info {
      .greeting {
        display: block;
        font-size: 16px;
        color: #000000;
        font-weight: 600;
        line-height: 2;
      }

      .welcome {
        display: block;
        font-size:12px;
        color: #000000;
        line-height: 1.4;
      }
    }
  }

  .logout {
    font-size: 14px;
    color: rgba(0,0,0,0.70);
    padding: 10rpx;
    width:65px;
    height:30px;
    border-radius: 8px;
    background: rgba(255,255,255,0.70);
    text-align: center;
    line-height: 30px;
    img{
      width:14px;
      height:14px;
      vertical-align: middle;
      margin-right: 4px;
    }
  }
}

.todo-box {
  min-height:calc(100vh - 153px );
  background: #FFFFFF;
  border-radius: 20px 20px 0 0;
  padding: 20px;
  box-sizing: border-box;
  padding-bottom: 0;

  .todo-title-box{
    display: flex;
    align-items: center;
  }
  .todo-title {
    font-size: 32rpx;
    color: #333333;
    font-weight: 500;
    height: 18px;
    width:77px;
  }

  .todo-count {
    font-size: 32rpx;
    color: #FFF;
    margin-left: 12rpx;
    width:50px;
    background-image: url('/static/形状结合.svg');
    background-size: 100% 100%;
    text-align: center;
  }
}

.search-box {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
  background-color: #F5F7FB;
  height: 40px;
  justify-content:space-between;
  border-radius: 20px;
  padding:0 10px;
  margin-top:12px;

  
  input {
    flex: 1;
    height: 40px;

    background: transparent;
    border-radius: 36rpx;
    padding: 0 30rpx;
    font-size: 28rpx;
    margin-right: 20rpx;
  }

  .placeholder {
    color: #999999;
  }

  .search-btn {
    width: 48px;
    height: 30px;
    line-height: 30px;
    background: #2B7AFA;
    color: #FFFFFF;
    font-size: 14px;
    border-radius: 15px;
    padding: 0;
    margin:0;
    
  }
}

.list-box {
  font-size: 28rpx;
  height:519px;
  box-sizing: border-box;
  // overflow:auto;
  padding-top:10px;
  .list-item{
    padding:15px;
    background: #F5F7FB;
    border-radius: 16px;
    margin-top:10px;
    min-height: 245px;
    .divider{
      width:100%;
      height:1px;
      background: #E0E0E0;
      margin:15px 0 
    }
    .list-item-title{
      font-size: 16px;
      line-height: 26px;
      color:#000000;
      font-weight: 600;
    }
    .list-item-info{
      margin-top:22px;
      font-size: 14px;
      color: rgba(0,0,0,0.70);
      img{
        margin-right: 10px;
        vertical-align: middle;
      }
      .lable{
        color: #889cac;
        margin-right: 14px;
        
      }
    }
    .btn-box{width:84px;
      height:30px;
      line-height: 30px;
      text-align: center;
      background: #2B7AFA;
      border-radius: 15px;
      color:#fff;
      font-size: 14px;
      margin-top: 22px;
      margin-left:calc(100% - 84px);
      
      img{
        vertical-align: middle;
        margin-left: 5px;
      }
    }
  }
  .empty-box{
    width:100%;
    text-align: center;
    margin-top: 40px;
    color:#889CAC

  }
}
</style>
